<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>故障统计</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/common.css"/>
		<style>
			body {
			}
			.ic-w {
				width: 40px;
			}
		</style>
	</head>
	<body>
		<header class="top-header">
			<div class="top-nav-content flex-container flex-center-v">
				<div class="flex-item">
					<div class="back-pre-pg ic-w icon-arrow-left"></div>
				</div>
				<div>
					故障统计
				</div>
				<div class="flex-item flex-container flex-center-v flex-between">
					<div></div>
					<div class="flex-container flex-center-v flex-between">
						<div id="acms-btn-1" class="ic-w icon-search-white"></div>
						<div id="acms-btn-2" class="ic-w icon-plus-sign-white"></div>
					</div>
				</div>
			</div>
		</header>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/request.js"></script>
	<script type="text/javascript">
		var mUserId;
		//所有可管理的区域
		var mMA;
		//需要所搜索的区域
		var mSearchAreaId;
		//需要所搜索的区域
		var mSearchTime;
		//需要所搜索的时间
		var mSearchTime;
		apiready = function() {
			//适配iOS7+，Android4.4+状态栏沉浸式效果，详见config文档statusBarAppearance字段
			$api.fixStatusBar($api.dom('header'));
			initData();
			requestManageArea();
		};
		function initData() {
			mUserId = $api.getStorage(MyCom.key_userid);
		}

		function initView(data) {
			var doc = document;
			//搜搜
			var btn1 = doc.getElementById('acms-btn-1');
			//分类
			var btn2 = doc.getElementById('acms-btn-2');
			btn1.onclick = function() {
				openSearchPg();
			}
			btn2.onclick = function() {
				var x = api.winWidth - 10;
				var y = $api.dom('header').offsetHeight-10;
				var w = 165;
				var h = 34 * data.length;
				var popData = [];
				for (var i = 0; i < data.length; i++) {
					var obj = {};
					obj.title = data[i].warn_place;
					popData.push(obj);
				}
				pop(x, y, w, h, popData);
			}
			MyCom.backPrePg();
			setDateListener();
			mSearchAreaId = mMA[0].protect_id;
			openFm();
		}

		/**
		 * 打开frame页面
		 *
		 */
		function openFm() {
			api.openFrame({
				name : 'complaint_statistics_frame',
				url : './complaint_statistics_frame.html',
				rect : {
					x : 0,
					y : $api.dom('header').offsetHeight,
					w : api.winWidth,
					h : 'auto'
				},
				reload : true,
				pageParam : {
					'areaid' : mSearchAreaId,
					'time' : mSearchTime
				}
			});
		}

		/**
		 * 打开搜索页
		 */
		function openSearchPg() {
			api.openWin({
				name : 'search',
				url : '.././search.html',
				pageParam : {
					'tag' : 4
				}
			});
		}

		/**
		 * 弹出菜单
		 * @param {Number} x - 菜单显示位置的横坐标。
		 * @param {Number} y - 菜单显示位置的纵坐标。
		 * @param {Number} w - 菜单显示的宽度。
		 * @param {Number} h - 菜单显示的高度。
		 * @param {Array} data - 要显示的数据数组。
		 * @param {Number} tag - 标记，区分是谁打开的pop
		 * @param {String} ore - 弹出方向，默认为downward
		 */
		function pop(x, y, w, h, data, tag, ore) {
			ore = ore || 'downward';
			var mnPopups = api.require('MNPopups');
			mnPopups.open({
				rect : {
					w : w,
					h : h
				},
				position : {
					x : x,
					y : y
				},
				styles : {
					mask : 'rgba(0,0,0,0.2)',
					bg : '#000',
					cell : {
						bg : {
							normal : '#000',
							highlight : '#f00'
						},
						h : 33,
						title : {
							marginL : 10,
							color : '#fff',
							size : 14,
						},
						icon : {
							marginL : 0,
							w : 0,
							h : 0,
							corner : 2
						},
						separateLine : {//（可选项）JSON 类型；分割线的样式设置
							width : 1, //（可选项）数字类型；分割线的粗细，默认为1
							marginLR : 0, //（可选项）数字类型；分割线距离左右的间距，默认为0
							bg : '#fff', //（可选项）字符类型；分割线的背景颜色，支持rgb、rgba、#；默认：#C0C0C0
							hideLastSeparateLine : true //(可选项)布尔类型；是否隐藏最后一条分割线，默认false
						}
					},
					pointer : {
						size : 7,
						xPercent : 85,
						yPercent : 0,
						orientation : ore
					}
				},
				datas : data,
				animation : false
			}, function(ret) {
				if (ret.eventType == 'click') {
					var index = ret.index;
					mSearchAreaId = mMA[index].protect_id;
					openFm();
				}
			});
		}

		/**
		 * 服务器请求：获取可管理区域
		 */
		function requestManageArea() {
			api.showProgress({
			});
			var data = {
				values : {
					'userid' : mUserId
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_MANAGE_AREA;
			MyRequest.requestMethod(url, data, function(re) {
				if (re) {
					console.log('获取可管理区域---re=' + JSON.stringify(re));
					var code = re.code;
					if (code == 1) {
						var list = re.list;
						mMA = list;
						initView(list);
						api.hideProgress();
					} else {
						api.hideProgress();
						api.toast({
							msg : re.msg
						});
					}
				} else {
					api.hideProgress();
					MyCom.errorTip(3);
				}
			});
		}

		/**
		 * 设置“日期选择”的监听 ,保持选中的日期不变。
		 */
		function setDateListener() {
			api.addEventListener({
				name : 'DateListener'
			}, function(ret, err) {
				if (ret) {
					var v = ret.value;
					var type = v.type;
					mSearchTime = v;
					if (type == 1) {
						openFm();
					}
				} else {
					MyCom.errorTip(1);
				}
			});
		}
	</script>
</html>
